<template>
  <div>
    <el-container>
      <!--编辑窗口-->
      <el-dialog title="修改用户信息" :visible.sync="updateBox" width="50%" :close-on-click-modal="true" center>
        <div>
          <el-form :model="updateForm" label-width="80px" ref="editForm">
            <el-descriptions class="margin-top" title="" :column="1" border>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  用户名
                </template>
                <el-input v-if="updateBox" v-model="updateForm.userName" style="width: 140px"></el-input>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-mobile-phone"></i>
                  手机号
                </template>
                <el-input v-if="updateBox" v-model="updateForm.tel" style="width: 140px"></el-input>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-place"></i>
                  性别
                </template>
                <el-select v-if="updateBox" v-model="updateForm.sex" placeholder="请选择性别" clearable style="width: 140px">
                  <el-option label="男" value="男"></el-option>
                  <el-option label="女" value="女"></el-option>
                </el-select>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-office-building"></i>
                  个人简介
                </template>
                <el-input v-if="updateBox" type="textarea" v-model="updateForm.personalSignature"></el-input>
              </el-descriptions-item>
            </el-descriptions>
            <div v-if="updateBox" style="margin-top: 20px">
              <el-button type="primary" @click="confirmEditUserInfo">保存</el-button>
            </div>
            <div v-else style="margin-top: 20px">
              <el-button type="text" @click="editUserInfo">编辑</el-button>
            </div>
          </el-form>
        </div>
      </el-dialog>
      <el-dialog title="修改用户密码" :direction="direction" :visible.sync="updatePassBox" with-header="false" size="500px">
        <div class="password-change-page">
          <el-form :model="updatePassForm" status-icon :rules="rules" ref="updatePassForm" label-width="100px"
            class="demo-ruleForm">
            <el-form-item label="旧密码" prop="oldPassword">
              <el-input type="password" v-model="updatePassForm.oldPassword" autocomplete="off"
                show-password></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input type="password" v-model="updatePassForm.newPassword" autocomplete="off"
                show-password></el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="confirmPassword">
              <el-input type="password" v-model="updatePassForm.confirmPassword" autocomplete="off"
                show-password></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="confirmUpdatePass('updatePassForm')">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
      <el-drawer :direction="direction" :visible.sync="drawerBox" :with-header="false" size="500px">
        <div style="
            display: flex;
            flex-direction: row;
            margin-top: 6px;
            margin-left: 8px;
          ">
          <div class="block">
            <el-upload class="avatar-uploader" ref="upload" action="fakeaction" :show-file-list="false"
              accept=".jpg, .png" :limit="1" :http-request="uploadAvatar">
              <el-avatar :size="50" :src="circleUrl"></el-avatar>
              <!-- <i v-else class="el-icon-plus avatar-uploader-icon" /> -->
            </el-upload>
          </div>
          <div style="
              margin: 10px;
              font-size: large;
              font-weight: bold;
              color: black;
            ">
            用户信息
          </div>
          <div style="margin-left: 280px">
            <el-button @click="editUserInfo" style="margin-top: 6px" type="primary" size="small">编辑</el-button>
          </div>
        </div>
        <el-descriptions class="margin-top" title="" :column="1" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              用户名
            </template>
            <div style="width: 140px">
              {{ userPersonalData.userName }}
            </div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              手机号
            </template>
            {{ userPersonalData.tel }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-place"></i>
              性别
            </template>
            {{ userPersonalData.sex }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              个人简介
            </template>
            {{ userPersonalData.personalSignature }}
          </el-descriptions-item>
        </el-descriptions>
      </el-drawer>
      <el-drawer :direction="direction" :visible.sync="accountSafeBox" :with-header="false" size="500px">
        <div style="
            display: flex;
            flex-direction: row;
            margin-top: 20px;
            margin-left: 12px;
            margin-bottom: 10px;
          ">
          <div style="font-weight: bold; font-size: large; color: black">
            登录账号
            <svg t="1735133274857" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="4803" width="16" height="16">
              <path
                d="M512 1019.733333C231.594667 1019.733333 4.266667 792.405333 4.266667 512S231.594667 4.266667 512 4.266667 1019.733333 231.594667 1019.733333 512 792.405333 1019.733333 512 1019.733333z m0-76.8c237.994667 0 430.933333-192.938667 430.933333-430.933333 0-237.994667-192.938667-430.933333-430.933333-430.933333C274.005333 81.066667 81.066667 274.005333 81.066667 512c0 237.994667 192.938667 430.933333 430.933333 430.933333z"
                fill="#51C41A" p-id="4804"></path>
              <path
                d="M181.418667 580.138667a44.288 44.288 0 0 1 0-61.312 41.301333 41.301333 0 0 1 59.605333 0l85.248 89.472c16.426667 16.938667 16.426667 44.416 0 61.354666a41.301333 41.301333 0 0 1-59.605333 0l-85.248-89.514666z m556.245333-255.402667a41.301333 41.301333 0 0 1 59.392-5.333333c17.834667 15.402667 20.138667 42.794667 5.162667 61.141333L395.52 751.445333a41.301333 41.301333 0 0 1-59.349333 5.333334 44.245333 44.245333 0 0 1-5.205334-61.141334l406.741334-370.901333z"
                fill="#51C41A" p-id="4805"></path>
            </svg>
          </div>
        </div>
        <el-form :model="accountForm" status-icon ref="form" label-width="80px" style="width: 350px">
          <el-form-item label="登录账号" prop="email">
            <el-input v-model="accountForm.email" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="登录密码" prop="password" style="width: 446px">
            <div style="display: flex; align-items: center">
              <el-input :disabled="true" type="password" v-model="accountForm.password" autocomplete="off"
                show-password></el-input>
              <el-button @click="editUserPass" style="margin-left: 15px" type="primary" size="small">更改密码</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-drawer>
      <el-header class="header">
        <div class="con-main-f">
          <svg style="margin-left: 20px; margin-top: 2px" t="1715878709147" class="icon" viewBox="0 0 1024 1024"
            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4400" width="48" height="48">
            <path
              d="M1019.211144 512.942488c0 281.360557-228.092179 509.452736-509.452736 509.452736-281.370746 0-509.452736-228.092179-509.452736-509.452736 0-281.365652 228.08199-509.452736 509.452736-509.452737 281.360557 0 509.452736 228.087085 509.452736 509.452737"
              fill="#ffffff" p-id="4401" data-spm-anchor-id="a313x.search_index.0.i0.51293a81TTdvre" class="selected">
            </path>
            <path
              d="M495.391841 725.786746l43.466507 37.888H377.580896c-111.55996 0-201.99801-90.432955-201.99801-201.99801a200.979104 200.979104 0 0 1 23.332935-94.320079 202.731622 202.731622 0 0 1 59.656915-68.913672 201.590448 201.590448 0 0 1 44.261254-24.484298l-16.378905-14.274866-1.237971-1.08004L174.640398 262.210229h145.89198l110.586906 96.388458 12.81783 11.182487-0.463602 0.891542c0.840597 0.285294 1.671005 0.585871 2.501413 0.891543l93.983841 81.92H377.596179c-15.961154 0-31.127562 3.459184-44.780895 9.669413a108.48796 108.48796 0 0 0-59.386906 69.158209 108.411542 108.411542 0 0 0-4.024677 29.364855c0 4.503562 0.275104 8.94599 0.804936 13.312 6.566846 53.477254 52.142488 94.890667 107.387542 94.890667h53.655562l64.1401 55.907343z"
              fill="#226DFF" p-id="4402"></path>
            <path
              d="M895.821692 763.674746h-145.897075L642.31801 669.879403l-4.834707-4.213174-63.732537-55.560916-40.287522-35.111482h88.288159c16.404378 0 31.968159-3.652776 45.901692-10.204338 28.962388-13.587104 50.919801-39.630328 58.964059-71.241871 2.170269-8.558806 3.326726-17.52008 3.326727-26.746269 0-4.508657-0.280199-8.951085-0.81003-13.317094-6.561751-53.472159-52.137393-94.880478-107.382448-94.880478h-49.951841L504.714826 300.123701l-43.497075-37.913472h161.343682c111.554866 0 201.99801 90.43805 201.99801 201.987821a200.989294 200.989294 0 0 1-23.363503 94.360836 202.818229 202.818229 0 0 1-60.747144 69.693134l4.335443 3.76995L895.821692 763.669652z"
              fill="#1BD9A2" p-id="4403"></path>
          </svg>
          <div ref="logo" class="con-logo" @mouseenter="startLogoAnimation" @mouseleave="stopLogoAnimation">
            Carot
          </div>
          <div class="con-logout-butt">
            <el-button @click="logout" class="logout-butt">退出登录</el-button>
          </div>
          <h1></h1>
        </div>
      </el-header>
      <el-container>
        <el-aside class="aside-nav" width="180px">
          <el-col :span="12">
            <el-menu @select="handleSelect" router :default-active="$route.path" class="el-menu-vertical">
              <el-submenu index="1">
                <template slot="title">
                  <span class="ell-butt">
                    <svg t="1718354413474" class="icon-nav" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="2435" width="200" height="200">
                      <path
                        d="M512 74.666667c241.536 0 437.333333 195.797333 437.333333 437.333333S753.536 949.333333 512 949.333333 74.666667 753.536 74.666667 512 270.464 74.666667 512 74.666667z m0 64C305.813333 138.666667 138.666667 305.813333 138.666667 512S305.813333 885.333333 512 885.333333 885.333333 718.186667 885.333333 512 718.186667 138.666667 512 138.666667z m138.666667 170.666666a32 32 0 0 1 31.850666 28.928L682.666667 341.333333v106.666667a32 32 0 0 1-63.850667 3.072L618.666667 448v-106.666667a32 32 0 0 1 32-32z m-277.333334 0a32 32 0 0 1 31.850667 28.928L405.333333 341.333333v106.666667a32 32 0 0 1-63.850666 3.072L341.333333 448v-106.666667a32 32 0 0 1 32-32z"
                        fill="#111111" p-id="2436"></path>
                    </svg>
                    个人中心
                  </span>
                </template>
                <el-menu-item @click="openPersonalCard">
                  <svg t="1718354493744" class="icon-nav" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2772" width="200" height="200">
                    <path
                      d="M507.690667 106.666667h-12.245334l-5.461333 0.064c-107.050667 3.413333-190.549333 91.733333-190.549333 198.784v92.949333l0.085333 6.634667 0.384 7.274666c3.498667 50.773333 24.533333 97.536 59.434667 132.650667l40.085333 40.405333 0.597333 0.661334a2.837333 2.837333 0 0 1 0.32 1.322666l-0.042666 5.653334-278.08 134.357333-4.501334 2.304C83.754667 748.736 64 782.933333 64 819.776v9.450667l0.170667 6.485333C67.029333 881.28 104.533333 917.333333 150.570667 917.333333h701.525333C900.266667 917.333333 938.666667 877.994667 938.666667 830.208v-10.432l-0.106667-4.864a101.973333 101.973333 0 0 0-57.258667-87.061333L602.304 593.066667v-5.653334c0-0.746667 0.277333-1.386667 0.597333-1.706666l40.448-40.704a207.146667 207.146667 0 0 0 59.882667-145.941334V305.493333c0-109.44-87.189333-198.826667-195.541333-198.826666z m0 64c72.64 0 131.541333 60.373333 131.541333 134.826666v93.546667a143.146667 143.146667 0 0 1-41.301333 100.864l-40.469334 40.746667a66.410667 66.410667 0 0 0-19.136 46.762666v5.824c0 24.426667 13.738667 46.656 35.285334 57.045334l279.829333 135.168c12.949333 6.272 21.226667 19.626667 21.226667 34.346666v10.410667c0 12.8-10.112 23.125333-22.570667 23.125333H150.570667a22.826667 22.826667 0 0 1-22.528-21.632L128 819.776c0-13.866667 7.381333-26.602667 19.221333-33.28l2.837334-1.450667 278.997333-134.762666a63.018667 63.018667 0 0 0 34.986667-50.986667l0.256-4.565333 0.042666-7.317334c0-15.36-5.248-30.165333-14.805333-41.92l-3.264-3.733333-41.536-41.834667a143.018667 143.018667 0 0 1-41.216-95.722666l-0.085333-5.738667V305.493333c0-72.810667 56.426667-132.48 127.424-134.762666L495.445333 170.666667h12.245334z"
                      fill="#000000" p-id="2773"></path>
                    <path
                      d="M949.333333 576v21.333333a21.333333 21.333333 0 0 1-21.333333 21.333334h-85.333333a21.333333 21.333333 0 0 1-21.333334-21.333334v-21.333333a21.333333 21.333333 0 0 1 21.333334-21.333333h85.333333a21.333333 21.333333 0 0 1 21.333333 21.333333zM949.333333 458.666667v21.333333a21.333333 21.333333 0 0 1-21.333333 21.333333h-149.333333a21.333333 21.333333 0 0 1-21.333334-21.333333v-21.333333a21.333333 21.333333 0 0 1 21.333334-21.333334h149.333333a21.333333 21.333333 0 0 1 21.333333 21.333334zM949.333333 341.333333v21.333334a21.333333 21.333333 0 0 1-21.333333 21.333333h-149.333333a21.333333 21.333333 0 0 1-21.333334-21.333333v-21.333334a21.333333 21.333333 0 0 1 21.333334-21.333333h149.333333a21.333333 21.333333 0 0 1 21.333333 21.333333z"
                      fill="#000000" p-id="2774"></path>
                  </svg>
                  个人信息
                </el-menu-item>
                <el-menu-item @click="openAccountSafe">
                  <svg t="1718354446846" class="icon-nav" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2603" width="200" height="200">
                    <path
                      d="M714.666667 100.885333l137.6 25.024A79.274667 79.274667 0 0 1 917.333333 203.904v487.978667a79.274667 79.274667 0 0 1-38.293333 67.861333L573.44 944.234667a118.890667 118.890667 0 0 1-122.922667 0L144.96 759.744A79.274667 79.274667 0 0 1 106.666667 691.904V203.882667a79.274667 79.274667 0 0 1 65.066666-77.994667L309.333333 100.906667a1132.117333 1132.117333 0 0 1 405.333334 0z m-11.456 62.954667a1068.117333 1068.117333 0 0 0-382.421334 0l-137.6 25.045333A15.274667 15.274667 0 0 0 170.666667 203.904v487.978667c0 5.333333 2.794667 10.304 7.381333 13.077333l305.578667 184.490667a54.890667 54.890667 0 0 0 56.746666 0l305.578667-184.490667a15.274667 15.274667 0 0 0 7.381333-13.077333V203.904a15.274667 15.274667 0 0 0-12.522666-15.018667l-137.6-25.045333z"
                      fill="#111111" p-id="2604"></path>
                    <path
                      d="M707.050667 353.194667a32 32 0 0 1 43.029333 47.36l-207.893333 188.928a122.069333 122.069333 0 0 1-167.210667-2.837334l-87.957333-85.525333a32 32 0 0 1 44.629333-45.866667l87.957333 85.504a58.069333 58.069333 0 0 0 79.530667 1.344l207.914667-188.906666z"
                      fill="#111111" p-id="2605"></path>
                  </svg>
                  账号安全
                </el-menu-item>
              </el-submenu>
              <el-menu-item index="/workPlaceView/storeMange">
                <svg t="1718354380295" class="icon-nav" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="2266" width="200" height="200">
                  <path
                    d="M821.909333 85.333333c12.842667 0 22.485333 6.4 28.906667 16l105.962667 204.8c2.645333 5.226667 3.114667 19.050667 3.2 25.642667L960 418.133333c0 80-67.434667 147.2-147.733333 147.2h-41.749334c-48.170667 0-86.698667-16-112.405333-41.6-25.685333 28.8-70.634667 44.8-125.226667 44.8h-41.749333c-54.613333 0-99.562667-16-125.248-44.8-25.706667 28.8-64.234667 44.8-112.426667 44.8H211.754667C131.413333 568.533333 64 501.333333 64 421.333333v-81.28c0.042667-4.842667 0.32-17.706667 3.2-24.32l83.52-208c3.2-12.8 16.042667-22.4 28.885333-22.4h642.304z m-18.325333 64H202.944l-74.773333 186.24-0.106667 1.706667-0.064 2.773333v81.28c0 44.586667 38.741333 83.2 83.733333 83.2h41.749334c30.144 0 51.413333-8.554667 64.64-23.402666l47.765333-53.546667 47.744 53.546667c12.117333 13.589333 39.616 23.402667 77.504 23.402666h41.749333c37.866667 0 65.365333-9.813333 77.482667-23.402666l45.013333-50.474667 47.914667 47.744c14.293333 14.229333 37.12 22.933333 67.221333 22.933333h41.749334c45.013333 0 83.733333-38.613333 83.733333-83.2v-83.2l-0.021333-3.477333-0.170667-3.904L803.584 149.333333zM867.818667 600.64a32 32 0 0 1 32 32V832a96 96 0 0 1-96 96H221.141333a96 96 0 0 1-96-96v-199.36a32 32 0 0 1 64 0V832a32 32 0 0 0 32 32h582.677334a32 32 0 0 0 32-32v-199.36a32 32 0 0 1 32-32z"
                    fill="#111111" p-id="2267"></path>
                  <path d="M910.506667 288v64H83.52v-64z" fill="#111111" p-id="2268"></path>
                </svg>
                <span class="title-nav" slot="title">店铺管理</span>
              </el-menu-item>
              <el-menu-item index="/workPlaceView/clothesMange">
                <svg t="1718354613332" class="icon-nav" viewBox="0 0 1228 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="2941" width="200" height="200">
                  <path
                    d="M1140.16256 120.34048h-48.64l10.81344-2.70336V66.29376c0-29.71648-35.14368-54.0672-67.584-54.0672H197.0176c-29.73696 0-67.584 24.35072-67.584 54.0672v48.64l10.81344 2.70336H91.58656c-43.23328 2.70336-70.2464 40.5504-70.2464 83.78368v729.68192c0 45.93664 27.01312 81.08032 70.2464 81.08032H1137.4592c45.95712 0 70.26688-35.14368 70.26688-81.1008V201.44128c2.70336-43.23328-24.30976-81.08032-67.56352-81.08032z m-118.90688-2.70336c0 2.70336 0 2.70336 0 0l-835.072 2.70336s-2.70336 0-2.70336-2.70336V66.29376s0-2.70336 2.70336-2.70336h835.072s2.70336 0 2.70336 2.70336v51.34336h-2.70336zM75.3664 931.10272V201.4208c0-16.22016 2.70336-27.0336 16.22016-27.0336h497.2544v783.74912H91.60704c-13.5168 0-16.22016-10.81344-16.22016-27.0336z m1081.01632 0c0 16.22016-2.70336 27.0336-16.22016 27.0336h-497.2544V174.3872h497.2544c16.22016 0 16.22016 13.5168 16.22016 27.0336v729.68192zM399.6672 390.59456h-189.17376c-16.19968 0-27.0336 10.81344-27.0336 27.0336s10.83392 27.0336 27.0336 27.0336h189.17376c16.22016 0 27.0336-10.81344 27.0336-27.0336s-10.81344-27.0336-27.0336-27.0336z m621.58848 0h-189.17376c-16.22016 0-27.0336 10.81344-27.0336 27.0336s10.81344 27.0336 27.0336 27.0336h189.17376c16.22016 0 27.0336-10.81344 27.0336-27.0336s-10.81344-27.0336-27.0336-27.0336z"
                    fill="#111111" p-id="2942"></path>
                </svg>
                <span slot="title">服装管理</span>
              </el-menu-item>
              <el-menu-item index="/workPlaceView/purchaseMange">
                <svg t="1718353882521" class="icon-nav" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="1705" width="24" height="24">
                  <path
                    d="M792.896 117.333333a156.437333 156.437333 0 0 1 156.437333 156.437334 32 32 0 0 1-64 0A92.437333 92.437333 0 0 0 792.896 181.333333H231.978667A93.312 93.312 0 0 0 138.666667 274.645333v496.042667a93.312 93.312 0 0 0 93.312 93.312h560.917333a92.437333 92.437333 0 0 0 92.437333-92.437333 32 32 0 1 1 64 0 156.437333 156.437333 0 0 1-156.437333 156.437333H231.978667A157.312 157.312 0 0 1 74.666667 770.688V274.645333A157.312 157.312 0 0 1 231.978667 117.333333h560.917333z"
                    fill="#111111" p-id="1706"></path>
                  <path
                    d="M456.682667 345.621333a32 32 0 1 1 48.256 42.026667l-117.333334 134.656 116.992 129.813333a32 32 0 0 1-0.042666 42.88l-2.304 2.325334a32 32 0 0 1-45.205334-2.346667l-135.936-150.890667a32 32 0 0 1-0.341333-42.453333l135.914667-156.010667z"
                    fill="#111111" p-id="1707"></path>
                  <path d="M917.333333 488.106667a32 32 0 0 1 0 64H356.096a32 32 0 0 1 0-64H917.333333z" fill="#111111"
                    p-id="1708"></path>
                </svg>
                <span slot="title">进货管理</span>
              </el-menu-item>
              <el-menu-item index="/workPlaceView/saleMange">
                <svg t="1718354316905" class="icon-nav" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="2096" width="200" height="200">
                  <path
                    d="M621.653333 96a32 32 0 0 1 0 64H257.578667A97.578667 97.578667 0 0 0 160 257.578667v508.842666a97.578667 97.578667 0 0 0 97.578667 97.578667h507.264a97.578667 97.578667 0 0 0 97.578666-97.152l1.578667-356.928a32 32 0 0 1 64 0.277333l-1.578667 356.928a161.578667 161.578667 0 0 1-161.578666 160.874667H257.578667A161.578667 161.578667 0 0 1 96 766.421333V257.578667A161.578667 161.578667 0 0 1 257.578667 96H621.653333z"
                    fill="#111111" p-id="2097"></path>
                  <path
                    d="M753.258667 113.557333L455.552 409.6a64 64 0 0 0-18.88 45.376v53.845333a67.242667 67.242667 0 0 0 65.770667 67.242667l50.986666 1.109333a64 64 0 0 0 45.738667-17.813333L902.826667 267.946667a107.946667 107.946667 0 0 0 3.242666-152.490667l-1.450666-1.493333a107.029333 107.029333 0 0 0-151.338667-0.426667z m106.538666 46.144a43.946667 43.946667 0 0 1-1.322666 62.08L554.88 513.194667l-51.008-1.130667a3.242667 3.242667 0 0 1-3.178667-3.242667v-53.845333L798.378667 158.933333a43.029333 43.029333 0 0 1 58.112-2.346666l3.306666 3.114666z"
                    fill="#111111" p-id="2098"></path>
                  <path d="M772.330667 154.858667l94.677333 95.274666-45.397333 45.098667-94.677334-95.253333z"
                    fill="#111111" p-id="2099"></path>
                </svg>
                <span slot="title">销售管理</span>
              </el-menu-item>
              <el-menu-item index="/workPlaceView/activityMange">
                <svg t="1734920989450" class="icon-nav" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="4417" width="200" height="200">
                  <path
                    d="M836.345598 257.721713l-28.427446 0c14.415314-24.441669 20.741393-47.75463 18.720364-69.379137-1.677199-18.098193-10.254551-43.982724-41.686425-64.611553-26.059516-17.143449-59.57177-21.348214-96.751554-12.059664-60.292178 15.137769-131.649366 67.180052-178.566932 130.073474C462.687386 178.852434 391.387503 126.809127 331.096349 111.671359c-37.210483-9.348925-70.751391-5.114484-96.807836 12.059664-31.404244 20.62883-39.983643 46.51336-41.659819 64.611553-2.02103 21.624507 4.246721 44.937468 18.720364 69.379137l-28.427446 0c-43.043329 0-78.073146 35.056424-78.073146 78.132498l0 100.636025c0 34.075073 22.474874 64.190975 54.991452 74.30431-3.090385 8.550747-4.708232 17.390066-4.708232 26.347065l0 301.923424c0 43.046399 35.069727 78.117149 78.117149 78.117149l552.85857 0c43.044352 0 78.05882-35.069727 78.05882-78.117149L864.166223 537.140587c0-9.014304-1.558495-17.882276-4.649903-26.376741 32.468482-10.169617 54.890144-40.285518 54.890144-74.274634l0-100.609419C914.405441 292.806789 879.390973 257.721713 836.345598 257.721713M786.10638 861.540931 537.426601 861.540931 537.426601 514.636037l248.680802 0c12.394285 0 22.445198 10.110265 22.445198 22.50455l0 301.923424C808.551578 851.459319 798.500665 861.540931 786.10638 861.540931M568.049039 257.721713c39.549761-45.61899 91.462085-81.468476 133.614114-92.043323 21.896706-5.487991 39.807634-3.985778 52.780087 4.565992 13.781888 9.055237 16.23373 17.129122 16.785292 23.227004 2.192945 22.35924-21.784142 52.504818-33.108049 64.250326L568.049039 257.721713zM858.763167 335.880817l0 100.609419c0 12.394285-10.024308 22.473851-22.417569 22.473851L537.426601 458.964086 537.426601 313.390593l298.918997 0C848.738859 313.390593 858.763167 323.488579 858.763167 335.880817M481.812979 514.636037l0 346.904894L233.24781 861.540931c-12.423961 0-22.477944-10.082636-22.477944-22.476921L210.769866 537.140587c0-12.394285 10.053983-22.50455 22.477944-22.50455L481.812979 514.636037zM248.039701 193.471386c0.547469-6.097882 3.03308-14.172791 16.756639-23.227004 12.882402-8.55177 30.794353-10.127661 52.809763-4.565992 41.917692 10.515494 93.773733 46.36805 133.410476 92.043323L281.088398 257.721713C270.948457 247.451812 245.81401 216.366839 248.039701 193.471386M160.445714 335.880817c0-12.391215 10.053983-22.490224 22.474874-22.490224l298.891368 0 0 145.573493L182.920588 458.964086c-12.420891 0-22.474874-10.079566-22.474874-22.473851L160.445714 335.880817z"
                    fill="#272536" p-id="4418"></path>
                </svg>
                <span slot="title">活动管理</span>
              </el-menu-item>
              <el-menu-item index="/workPlaceView/employeeMange">
                <svg t="1734917015601" class="icon-nav" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="2501" width="200" height="200">
                  <path
                    d="M265.402182 347.648c0-114.897455 93.905455-208.384 209.338182-208.384 115.432727 0 209.314909 93.486545 209.314909 208.384s-93.882182 208.384-209.314909 208.384-209.338182-93.486545-209.338182-208.384m458.24 324.561455a34.909091 34.909091 0 0 0-12.916364-47.080728 458.402909 458.402909 0 0 0-90.018909-40.983272c82.222545-50.408727 136.378182-141.777455 132.980364-245.713455C748.986182 194.792727 629.922909 75.52 485.701818 70.027636c-159.138909-6.050909-290.048 120.552727-290.048 277.620364 0 100.096 53.364364 187.578182 133.143273 236.497455-149.527273 49.291636-265.355636 171.962182-304.384 325.352727-4.654545 18.362182 5.701818 38.493091 24.064 43.426909 19.176727 5.143273 38.4-6.167273 42.891636-24.32 42.821818-171.264 198.283636-298.635636 383.394909-298.635636 73.332364 0 141.870545 20.177455 200.704 55.04 16.896 9.984 38.632727 4.282182 48.197819-12.8m272.314181-32.721455l-64.186181 63.883636c-9.588364 9.541818-25.297455 9.541818-34.909091 0l-39.144728-38.981818a24.576 24.576 0 0 1 0-34.746182l64.186182-63.883636a111.825455 111.825455 0 0 0-32.256-4.747636c-61.346909 0-111.104 49.501091-111.104 110.568727 0 18.757818 4.701091 36.421818 12.962909 51.874909L613.888 875.054545a22.388364 22.388364 0 0 0-1.303273 33.349819l39.168 38.981818a22.644364 22.644364 0 0 0 33.512728-1.303273l152.250181-176.826182c15.546182 8.238545 33.28 12.916364 52.130909 12.916364 61.323636 0 111.080727-49.524364 111.080728-110.592 0-11.170909-1.675636-21.946182-4.770909-32.093091"
                    fill="#000000" p-id="2502"></path>
                </svg>
                <span slot="title">员工管理</span>
              </el-menu-item>
              <el-menu-item index="/workPlaceView/costMange">
                <svg t="1718354216539" class="icon-nav" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="1925" width="200" height="200">
                  <path
                    d="M512 74.666667c241.536 0 437.333333 195.797333 437.333333 437.333333S753.536 949.333333 512 949.333333a436.096 436.096 0 0 1-242.986667-73.685333 32 32 0 1 1 35.584-53.162667A372.096 372.096 0 0 0 512 885.333333c206.186667 0 373.333333-167.146667 373.333333-373.333333S718.186667 138.666667 512 138.666667 138.666667 305.813333 138.666667 512a372.096 372.096 0 0 0 62.848 207.402667 32 32 0 0 1-53.162667 35.605333A436.096 436.096 0 0 1 74.666667 512C74.666667 270.442667 270.464 74.645333 512 74.645333z"
                    fill="#111111" p-id="1926"></path>
                  <path
                    d="M360.32 319.829333a32 32 0 0 1 45.184-2.197333l95.936 87.104 95.68-87.061333a32 32 0 0 1 42.88-0.192l2.346667 2.304a32 32 0 0 1-2.133334 45.226666l-117.184 106.666667a32 32 0 0 1-43.050666 0l-117.482667-106.666667a32 32 0 0 1-2.197333-45.184z"
                    fill="#111111" p-id="1927"></path>
                  <path
                    d="M640 448a32 32 0 0 1 0 64H341.333333a32 32 0 0 1 0-64h298.666667zM640 554.666667a32 32 0 0 1 0 64H341.333333a32 32 0 0 1 0-64h298.666667z"
                    fill="#111111" p-id="1928"></path>
                  <path
                    d="M496.426667 416a32 32 0 0 1 32.917333 31.082667l7.957333 277.333333a32 32 0 0 1-63.978666 1.834667l-7.957334-277.333334a32 32 0 0 1 31.061334-32.896z"
                    fill="#111111" p-id="1929"></path>
                </svg>
                <span slot="title">盈余管理</span>
              </el-menu-item>
              <el-menu-item index="/workPlaceView/dataMange">
                <svg t="1734921146754" class="icon-nav" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="5423" width="200" height="200">
                  <path
                    d="M488.96 960c74.24 0 145.92-17.92 209.92-53.76 10.24-5.12 17.92-15.36 17.92-28.16 0-12.8-5.12-23.04-15.36-30.72-10.24-5.12-23.04-5.12-33.28 0-53.76 30.72-115.2 46.08-179.2 46.08-202.24 0-366.08-163.84-366.08-366.08 0-192 145.92-348.16 332.8-366.08v366.08c0 17.92 15.36 33.28 33.28 33.28h401.92c17.92 0 33.28-15.36 33.28-33.28 0-238.08-194.56-432.64-432.64-432.64-238.08 0-435.2 194.56-435.2 432.64-2.56 238.08 192 432.64 432.64 432.64z m366.08-465.92h-332.8v-332.8c176.64 15.36 314.88 156.16 332.8 332.8z m0 0"
                    fill="#1A1A1A" p-id="5424"></path>
                  <path
                    d="M819.2 688.64c-7.68 17.92-17.92 35.84-30.72 51.2-10.24 15.36-7.68 35.84 7.68 46.08 15.36 10.24 35.84 7.68 46.08-7.68 12.8-20.48 25.6-38.4 35.84-61.44 7.68-15.36 2.56-35.84-15.36-43.52-15.36-7.68-35.84-2.56-43.52 15.36z m0 0"
                    fill="#1A1A1A" p-id="5425"></path>
                </svg>
                <span slot="title">数据统计</span>
              </el-menu-item>
              <el-menu-item index="/workPlaceView/userMessage">
                <svg t="1734921231423" class="icon-nav" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="6631" width="200" height="200">
                  <path
                    d="M523.946667 85.333333C802.773333 85.333333 982.826667 307.541333 982.826667 511.338667c0 242.837333-197.397333 448-458.837334 448-84.16 0-150.464-16.597333-221.610666-55.402667l-88.618667 50.197333c-27.797333 8.426667-50.474667 5.162667-68.010667-9.834666-17.557333-14.997333-25.130667-34.730667-22.72-59.2a19570.688 19570.688 0 0 0 29.653334-106.368C123.008 741.76 64 656.426667 64 511.338667 64 307.541333 245.141333 85.333333 523.946667 85.333333z m-1.28 64C304.064 149.333333 128 317.12 128 522.666667c0 77.354667 24.874667 151.125333 70.634667 213.184l5.397333 7.125333 18.218667 23.509333-36.970667 128.746667a0.32 0.32 0 0 0 0.490667 0.384l113.408-63.829333 26.752 14.592C385.237333 878.72 452.544 896 522.666667 896 741.269333 896 917.333333 728.213333 917.333333 522.666667S741.269333 149.333333 522.666667 149.333333z m-192 320a53.333333 53.333333 0 1 1 0 106.666667 53.333333 53.333333 0 0 1 0-106.666667z m182.848 0a53.333333 53.333333 0 1 1 0 106.666667 53.333333 53.333333 0 0 1 0-106.666667z m182.869333 0a53.333333 53.333333 0 1 1 0 106.666667 53.333333 53.333333 0 0 1 0-106.666667z"
                    fill="#111111" p-id="6632"></path>
                </svg>
                <span slot="title">系统通知</span>
              </el-menu-item>
              <el-menu-item index="/workPlaceView/customerMange">
                <svg t="1718894960444" class="icon-nav" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="4921" width="200" height="200">
                  <path
                    d="M518.4 149.290667c112.597333-80.789333 267.882667-69.397333 368.128 32 53.866667 54.528 84.138667 128.853333 84.138667 206.378666 0 77.525333-30.293333 151.850667-84.096 206.336l-294.421334 299.52a110.976 110.976 0 0 1-80.213333 34.474667 110.72 110.72 0 0 1-79.914667-34.176L137.322667 593.770667C83.562667 539.242667 53.333333 464.981333 53.333333 387.541333s30.229333-151.722667 84.010667-206.272c100.224-101.376 255.530667-112.768 368.128-31.978666l6.442667 4.778666 6.485333-4.778666z m322.602667 76.970666c-84.629333-85.589333-219.157333-88.64-307.328-6.954666l-21.76 20.138666-21.717334-20.138666c-88.192-81.685333-222.72-78.634667-307.306666 6.933333-41.92 42.496-65.557333 100.608-65.557334 161.28 0 60.693333 23.637333 118.805333 65.6 161.344l295.04 300.416c9.045333 9.450667 21.269333 14.72 33.962667 14.72 12.693333 0 24.917333-5.269333 34.261333-15.04L840.96 549.077333c42.005333-42.496 65.685333-100.650667 65.685333-161.408 0-60.736-23.68-118.912-65.664-161.408z"
                    fill="#111111" p-id="4922"></path>
                </svg>
                <span slot="title">顾客管理</span>
              </el-menu-item>
              <el-menu-item index="/workPlaceView/about">
                <svg t="1718894844713" class="icon-nav" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="2139" width="200" height="200">
                  <path
                    d="M149.461333 271.658667L322.432 386.986667l172.373333-241.28a41.173333 41.173333 0 0 1 66.986667 0l172.373333 241.28 172.970667-115.285334a41.173333 41.173333 0 0 1 63.701333 39.125334l-67.669333 575.146666a41.173333 41.173333 0 0 1-40.874667 36.309334H194.304a41.173333 41.173333 0 0 1-40.874667-36.352L85.76 310.741333a41.173333 41.173333 0 0 1 63.701333-39.082666z m378.88 403.541333a82.346667 82.346667 0 1 0 0-164.693333 82.346667 82.346667 0 0 0 0 164.693333z"
                    fill="#111111" p-id="2140"></path>
                </svg>
                <span slot="title">关于我们</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-aside>
        <el-main class="con-main" id="monitor-main-box">
          <div class="con-dashboard-logo">
            <svg style="margin-right: 6px; margin-top: 6px" t="1718903819935" class="icon" viewBox="0 0 1024 1024"
              version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6854" width="26" height="26">
              <path
                d="M1023.8 604.7c0 160.9-129 291.3-287.9 291.3H256.1C113.3 888.5 0.2 781.3 0.2 650.7c0-99.4 65.6-185 159.9-223.5 19.7-8 33.8-25.5 38.2-46.3C224.9 254.9 340.8 160 480 160c102.6 0 192.4 51.5 243.4 129 10 15.3 26.1 25.5 44.2 28.2 145.2 22 256.2 142.1 256.2 287.5z"
                p-id="6855" fill="#8a8a8a"></path>
            </svg>
            <span class="dashboard-logo">Dashboard</span>
            <el-select v-model="storeId" @change="handleSelectChange" placeholder="切换店铺" style="margin-left: 20px">
              <el-option v-for="item in options" :key="item.storeId" :label="item.storeName" :value="item.storeId">
              </el-option>
            </el-select>
            <span style="margin: 13px"> 当前店铺:{{ storeName }} </span>
          </div>
          <div class="con-main-s">
            <router-view ref="childComponent"></router-view>
          </div>
          <el-backtop :right="50" :bottom="50" target="#monitor-main-box" :visibility-height="50">
          </el-backtop>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import "animate.css";
import { request } from "@/network/request/request";
export default {
  name: "WorkPlaceView",
  mounted() {
    this.getStore();
    this.getAvatar();
    if (localStorage.getItem("storeName") != null) {
      this.storeName = localStorage.getItem("storeName");
    } else {
      this.storeName = "";
    }
  },
  data() {
    // 验证规则
    var validateConfirmPassword = (rule, value, callback) => {
      if (value !== this.updatePassForm.newPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var validateConfirmOldPassword = (rule, value, callback) => {
      if (value !== this.accountForm.password) {
        callback(new Error("密码不正确!"));
      } else {
        callback();
      }
    };
    return {
      logo: "Carot",
      storeId: "",
      box: true,
      options: [],
      storeName: "",
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      drawerBox: false,
      accountSafeBox: false,
      updateBox: false,
      updatePassBox: false,
      direction: "ltr",
      updateForm: {
        userName: "",
        avatar: "",
        personalSignature: "",
        tel: "",
        sex: "",
      },
      accountForm: {
        email: localStorage.getItem("email"),
        password: localStorage.getItem("password"),
      },
      updatePassForm: {
        email: "",
        oldPassword: "",
        newPassword: "",
        confirmPassword: "",
      },
      userPersonalData: {
        userName: "",
        avatar: "",
        personalSignature: "",
        tel: "",
        sex: "",
        createTime: "",
      },
      form: {
        //头像
        avatar:
          "https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png", //回显头像
      },
      rules: {
        oldPassword: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
          { validator: validateConfirmOldPassword, trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
        confirmPassword: [
          { required: true, message: "请再次输入新密码", trigger: "blur" },
          { validator: validateConfirmPassword, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      // this.$router.push(key);
      console.log(key + " " + keyPath);
    },
    async handleSelectChange(newId) {
      localStorage.setItem("storeId", newId);
      const params = {
        storeId: newId,
      };
      const config = {
        url: "api/user/store/getStoreById",
        method: "get",
        params: params,
      };
      const res = await request(config);
      if (res.data.code === 1) {
        localStorage.setItem("storeName", res.data.data.storeName);
        this.storeName = res.data.data.storeName;
      }
      const childComponent = this.$refs.childComponent;
      if (childComponent) {
        // 调用子组件的方法
        childComponent.findData();
        // 更新子组件的数据（前提是子组件数据是响应式的，例如通过Vue的data、computed等定义的）
        childComponent.childData = "新的数据值";
      }
      this.$message.success("店铺切换成功" + newId);
    },
    uploadAvatar(data) {
      const imgData = new FormData();
      console.log(data.file);
      imgData.append("file", data.file);
      imgData.append("email", localStorage.getItem("email"));
      const config = {
        method: "post",
        url: "api/user/upload",
        data: imgData,
      };
      request(config).then((res) => {
        // 处理成功后的逻辑
        if (res.data.code === 1) {
          console.log("头像读取成功");
          this.form.avatar = res.data.data;
          this.circleUrl = res.data.data;
          console.log("清除文件上传成功");
          this.$refs["upload"].clearFiles(); //上传成功之后清除历史记录
          this.updateAvatar();
        } else {
          this.error.$message.error(res.data.msg);
        }
      });
    },
    async getStore() {
      const params = {
        email: localStorage.getItem("email") /* 邮箱待办 */,
      };
      const config = {
        url: "api/user/store/getAll",
        method: "get",
        params: params,
      };
      const res = await request(config);
      if (res.data.code === 1) {
        this.options = res.data.data;
        const storeName = localStorage.getItem("storeName");
        if (storeName && localStorage.getItem("storeId")) {
          return;
        }
        if (res.data.data !== null && res.data.data !== undefined && res.data.data[0] != undefined && res.data.data[0] != undefined != null) {
          console.log(res.data.data);
          localStorage.setItem("storeName", res.data.data[0].storeName);
          localStorage.setItem("storeId", res.data.data[0].storeId);
          this.storeName = localStorage.getItem("storeName");
        } else {
          localStorage.setItem("storeId", 0);
          this.$message.error("当前无店铺，请创建店铺");
        }
      } else {
        this.$message.error(res.data.msg);
      }
    },
    startLogoAnimation() {
      // 添加动画类
      this.$refs.logo.classList.add("animate__animated", "animate__swing");
    },
    stopLogoAnimation() {
      // 移除动画类
      const toRemove = ["animate__animated", "animate__swing"];
      toRemove.forEach((className) => {
        this.$refs.logo.classList.remove(className);
      });
    },
    logout() {
      localStorage.removeItem("email");
      localStorage.removeItem("account");
      localStorage.removeItem("storeName");
      localStorage.removeItem("token");
      this.$router.push("/home");
    },
    openPersonalCard() {
      this.drawerBox = true;
    },
    updateAvatar() {
      const config = {
        url: "api/user/avatar",
        method: "put",
        data: {
          email: localStorage.getItem("email"),
          avatar: this.form.avatar,
        },
      };
      request(config)
        .then((res) => {
          if (res.data.code === 1) {
            this.$message.success("头像修改成功");
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getAvatar() {
      const params = {
        email: localStorage.getItem("email"),
      };
      const config = {
        url: "api/user/getUser",
        method: "get",
        params: params,
      };
      request(config)
        .then((res) => {
          if (res.data.code === 1) {
            this.circleUrl = res.data.data.avatar;
            this.userPersonalData = res.data.data;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    editUserInfo() {
      this.updateBox = true;
      const user = this.userPersonalData;
      this.updateForm.userName = user.userName;
      this.updateForm.sex = user.sex;
      this.updateForm.personalSignature = user.personalSignature;
      this.updateForm.tel = user.tel;
    },
    confirmEditUserInfo() {
      const config = {
        url: "api/user/update",
        method: "put",
        data: {
          email: localStorage.getItem("email"),
          userName: this.updateForm.userName,
          personalSignature: this.updateForm.personalSignature,
          sex: this.updateForm.sex,
          tel: this.updateForm.tel,
        },
      };
      request(config)
        .then((res) => {
          if (res.data.code === 1) {
            this.$message.success("用户个人信息修改成功");
            this.userPersonalData.userName = this.updateForm.userName;
            this.userPersonalData.sex = this.updateForm.sex;
            this.userPersonalData.personalSignature = this.updateForm.personalSignature;
            this.userPersonalData.tel = this.updateForm.tel;
            this.updateBox = false;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    openAccountSafe() {
      this.accountSafeBox = true;
    },
    editUserPass() {
      this.updatePassBox = true;
    },
    confirmUpdatePass(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 发送请求到服务器
          const config = {
            url: "api/user/update-pass",
            method: "put",
            data: {
              email: this.accountForm.email,
              newPassword: this.updatePassForm.confirmPassword,
            },
          };
          request(config)
            .then((res) => {
              if (res.data.code === 1) {
                this.$message.success("密码修改成功");
                this.accountForm.password = this.updatePassForm.confirmPassword;
                localStorage.setItem("password", this.updatePassForm.confirmPassword);
              }
            })
            .catch((error) => {
              console.log(error);
            });
        } else {
          console.log("表单验证失败");
          return false;
        }
      });
    },
  },
};
</script>
<style scoped>
body {
  color: rgb(255, 255, 255);
  margin: 0px;
  font-family: "微软雅黑", "PingFangM", Arial, sans-serif;
}

.icon-nav {
  margin-right: 5px;
  width: 26px;
  height: 20px;
}

/* logo样式 */
.logo-span {
  color: black;
  margin-top: 15px;
  font-size: 26px;
  font-weight: bold;
}

/* 侧边栏按钮样式 */
.el-menu-vertical {
  width: 180px;
  margin-top: 20px;
}

.centerContainer {
  display: flex;
  align-content: center;
  /* justify-content: center; */
}

.el-container {
  height: calc(100vh - 100px);
}

.header {
  border: 1px solid #f6f7f8;
}

.main {
  background-color: rgb(223, 222, 222);
  height: 605px;
}

.con-main {
  background-color: #f4f6fa;
  border-radius: 1px;
  height: 605px;
  padding: 0;
}

.con-main-f {
  display: flex;
  height: 50px;
  background-color: #ffffff;
  position: fixed;
  top: 0;
  left: 0px;
  width: 100%;
  z-index: 999;
}

.con-main-s {
  max-height: 8000px;
  overflow-y: auto;
  background-color: #ffff;
  margin-left: 32px;
  margin-bottom: 32px;
  margin-right: 40px;
  margin-top: 20px;
  border: 1px solid #e9ebef;
  padding: 20px;
  border-radius: 10px;
}

.aside-nav {
  background-color: #ffffff;
  color: #fff;
  height: 605px;
  padding: 0;
}

.el-menu-item {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  text-align: center;
  font-family: "微软雅黑", sans-serif;
  font-size: 15px;
}

.ell-butt {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  text-align: center;
  font-family: "微软雅黑", sans-serif;
  font-size: 16px;
}

:hover.ell-butt {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  text-align: center;
  font-family: "微软雅黑", sans-serif;
  font-size: large;
}

.el-menu-item:active {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  text-align: center;
  font-family: "微软雅黑", sans-serif;
  font-size: large;
  background-color: #eaf6ff;
}

.el-menu-item:focus {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  text-align: center;
  font-family: "微软雅黑", sans-serif;
  font-size: large;
}

:hover.el-menu-item {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  text-align: center;
  font-family: "微软雅黑", sans-serif;
  font-size: large;
  background-color: #eaf6ff !important;
}

.el-menu::after {
  clear: none;
}

.con-dashboard-logo {
  color: #989999;
  margin-left: 36px;
  margin-top: 18px;
  display: flex;
  align-content: center;
}

.dashboard-logo {
  font-weight: bold;
  display: flex;
  align-content: center;
  margin-top: 10px;
}

.con-logout-butt {
  display: flex;
  justify-content: right;
  width: 1050px;
  color: #030303;
}

.logout-butt {
  color: #73c8fc;
  background-color: transparent;
  border: 0px;
}

:hover.logout-butt {
  color: #f97676;
  background-color: transparent;
  border: 0px;
}

.con-logo {
  display: flex;
  justify-content: center;
  align-content: center;
  color: #252c48;
  font-weight: bold;
  font-size: 24px;
  margin: 12px;
}
</style>
